<template>
  <view class="content">
    <u-navbar v-if="department_id" rightText="删除" :placeholder='true' title="編輯部门" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/branch/index')" @rightClick='dele'>
    </u-navbar>
    <u-navbar v-else :placeholder='true' title="添加部门" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/branch/index')">
    </u-navbar>
    <view class="main">
      <view>
        <view class="form">
          <view class="form-l">
            所屬分行/子公司
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <picker @change="bindPickerChange" :value="index" :range="array" range-key="branchname">
              <view class="picker">
                <view class="uni-input">{{ parentname  }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            部門編號
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.department_code" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            部門名稱（中）
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.departmentname" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            部門名稱（英）
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.en_departmentname" class="input-item" type="text" placeholder="">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            聯繫人
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.principal" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            電話
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.phone" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            電子郵箱
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="department.email" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            分配金額
          </view>
          <view class="form-r">
            <input v-model="department.amount" class="input-item" type="number">
          </view>
        </view>
        <view style="text-align: center;color: #909399;" v-if="department.amount">
          剩餘可分配額度：{{ balance - department.amount }}
        </view>
      </view>

    </view>
    <view class="btn" @click="submit">
      確定
    </view>
  </view>
</template>

<script>
import {
  getdepartmentByid,
  getbranch,
  editdepartment,
  getamount,
  deldepartment,
  adddepartment
  // getparent
} from '@/network/api/setting.js'
import {
  mapState
} from 'vuex'

export default {
  data() {
    return {
      balance: '',
      branch_id: '',
      parentname: '',
      department_id: '',
      array: [],
      index: 0,
      value: false,
      department: {
        department_id: '',
        branch_id: '',
        department_code: '',
        departmentname: '',
        en_departmentname: '',
        email: '',
        principal: '',
        phone: '',
        amount: '',
      },

    }
  },
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo,
    })
  },
  onLoad(e) {
	  console.log(e);
    this.branch_id = e.branch_id
    this.parentname = e.parentname
    if (e.department_id) {
      this.department_id = e.department_id
    }
  },
  onShow() {
    this.getParent()
    this.getdepartment()
  },
  methods: {
    async dele() {
      let that = this
      //确定删除该部门提示？
      uni.showModal({
        title: '提示',
        content: '确定删除该部门？',
        success: async function (res) {
          if (res.confirm) {
            let data = {
              department_id: that.department.department_id
            }
            const res = await deldepartment(data)
            if (res.data.code == 1) {
              uni.navigateTo({
                url: '/pages/mine/setting/branch/index'
              })
            }
          } else if (res.cancel) {
          }
        }
      });
    },
    async submit() {
      console.log(this.department);
      if (!this.department.department_code) {
        uni.showToast({
          title: '部門編號不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.department.departmentname) {
        uni.showToast({
          title: '部門名稱（中）不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.department.en_departmentname) {
        uni.showToast({
          title: '部門名稱（英）不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.department.principal) {
        uni.showToast({
          title: '聯繫人不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.department.phone) {
        uni.showToast({
          title: '電話不能为空',
          icon: 'none'
        })
        return
      }
      if (!this.department.email) {
        uni.showToast({
          title: '電子郵箱不能为空',
          icon: 'none'
        })
        return
      }
      if (this.department_id) {
        const res = await editdepartment(this.department)
        if (res.data.code == 1) {
          uni.showToast({
            title: '修改成功',
          })
          //一秒返回
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000);
        }
      } else {

        const res = await adddepartment(this.department)
        if (res.data.code == 1) {
          uni.showToast({
            title: '添加成功',
          })
          //一秒返回
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000);
        }
      }


    },
    async getParent() {
      let data = {
        branch_id: this.branch_id,
        company_id: this.userinfo.company_id
      }
      const res = await getbranch(data)
      this.array = res.data.branch
    },
    async getdepartment() {
      if (!this.department_id) return
      let data = {
        department_id: this.department_id
      }
      const res = await getdepartmentByid(data)
      this.department = res.data.department

    },
    async bindPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value
      this.department.branch_id = this.array[this.index].branch_id
      this.parentname = this.array[this.index].branchname
      let data = {
        branch_id: this.array[this.index].branch_id
      }
      const res = await getamount(data)
      this.balance = res.data.balance
    },
    leftClick(url) {
      console.log('rightClick');
      uni.navigateTo({
        url: url
      })
    },
  }
}
</script>

<style lang="scss">
.content {
  background-color: #F5F6F9;
  width: 100%;
  height: 100vh;
  position: relative;

  .main {
    background-color: #fff;

    .form {
      margin: 0 32rpx;
      padding: 32rpx 0;
      display: flex;
      border-bottom: 1rpx solid #DEDEDE;;

      .form-l {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .form-r {
        margin-left: 48rpx;
        flex: 1;

        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .uni-input {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }

    .form:last-child {
      border-bottom: none;
    }
  }

  .open {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 22rpx;
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 80rpx;
    color: #FFFFFF;
    width: 686rpx;
    height: 80rpx;
    text-align: center;
    background: #645AED;
    opacity: 1;
    border-radius: 30rpx;
  }
}
</style>
